<template>
  <div class="card h-100">
    <div class="card-header pb-0 p-3">
      <div class="row">
        <div class="col-6 d-flex align-items-center">
          <h6 class="mb-0">工厂总览</h6>
        </div>
      </div>
    </div>
    <div class="card-body p-5 pb-0 mb-0">
      <ul class="list-group">
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
          v-for="(item, index) in form"
          :key="index"
        >
          <div class="d-flex align-items-center text-sm">{{ item.name }}</div>
          <div class="d-flex align-items-center text-sm">{{ item.num }}</div>
          <div class="d-flex align-items-center text-sm">{{ item.status }}</div>
          <vsud-button color="fail" size="sm" variant="outline" @click="rent(item.num)"
            v-if = "item.zt==='wei' "
            >拉黑工厂</vsud-button
          >
          <vsud-button color="fail" size="sm" variant="outline" @click="rent(item.num)"
            v-if = "item.zt==='yi' "
            disabled
            >已被拉黑</vsud-button
          >
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <el-pagination layout="prev, pager, next" :total="50" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import VsudButton from "@/components/VsudButton.vue";
import { ElMessageBox } from "element-plus";
// import { Action } from 'element-plus'
export default {
  name: "RentCard",
  components: {
    VsudButton,
  },
  data() {
    return {
      form: [
        {
          name: "工厂0101",
          num: "负责3份订单",
          status: "无逾期",
          zt:"wei"
        },
        {
          name: "工厂0123",
          num: "负责12份订单",
          status: "1份逾期",
          zt:"wei"
        },
        {
          name: "工厂0133",
          num: "负责1份订单",
          status: "无逾期",
          zt:"wei"
        },
        {
          name: "工厂0194",
          num: "负责1份订单",
          status: "1份逾期",
          zt:"wei"
        },
        {
          name: "工厂0125",
          num: "负责3份订单",
          status: "1份逾期",
          zt:"wei"
        },
        {
          name: "工厂0126",
          num: "负责7份订单",
          zt:"wei",
          status: "已注销"
        },
        {
          name: "工厂0177",
          num: "负责7份订单",
          zt:"wei",
          status: "5份逾期"
        },
      ],
    };
  },
  methods: {
    rent(number) {
      this.form.forEach((val) => {
        if (val.num === number) val.zt = "yi";
      });
      ElMessageBox.alert("拉黑成功，您将不再接收该工厂消息。", "提示", {
        confirmButtonText: "OK",
      });
    },
  },
};
</script>
